import types from '../../mutation-types'
import Vue from 'vue'

export const mutations = {
  [types.SET_UI_FLAG] (_state, uiFlags) {
    _state.uiFlags = {
      ..._state.uiFlags,
      ...uiFlags,
    }
  },

  [types.ADD_ARTICLE]: ($state, article) => {
    if (!article.id) return

    Vue.set($state.articles.byId, article.id, {
      ...article,
    })
  },
  [types.CLEAR_ARTICLES]: $state => {
    Vue.set($state.articles, 'byId', {})
    Vue.set($state.articles, 'allIds', [])
    Vue.set($state.articles, 'uiFlags.byId', {})
  },
  [types.ADD_MANY_ARTICLES] ($state, articles) {
    const allArticles = { ...$state.articles.byId }
    articles.forEach(article => {
      allArticles[article.id] = article
    })

    Vue.set($state.articles, 'byId', allArticles)
  },
  [types.ADD_MANY_ARTICLES_ID] ($state, articleIds) {
    $state.articles.allIds.push(...articleIds)
  },

  [types.SET_ARTICLES_META]: ($state, data) => {
    const { articles_count: count, current_page: currentPage } = data
    Vue.set($state.meta, 'count', count)
    Vue.set($state.meta, 'currentPage', currentPage)
  },

  [types.ADD_ARTICLE_ID]: ($state, articleId) => {
    if ($state.articles.allIds.includes(articleId)) return
    $state.articles.allIds.push(articleId)
  },
  [types.UPDATE_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
    const flags =
      Object.keys($state.articles.uiFlags.byId).includes(articleId) || {}

    Vue.set($state.articles.uiFlags.byId, articleId, {
      ...{
        isFetching: false,
        isUpdating: false,
        isDeleting: false,
      },
      ...flags,
      ...uiFlags,
    })
  },
  [types.ADD_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
    Vue.set($state.articles.uiFlags.byId, articleId, {
      ...{
        isFetching: false,
        isUpdating: false,
        isDeleting: false,
      },
      ...uiFlags,
    })
  },
  [types.UPDATE_ARTICLE] ($state, article) {
    const articleId = article.id
    if (!$state.articles.allIds.includes(articleId)) return

    Vue.set($state.articles.byId, articleId, {
      ...article,
    })
  },
  [types.REMOVE_ARTICLE] ($state, articleId) {
    /* eslint-disable */
    const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId
    Vue.set($state.articles, 'byId', newById)
  },
  [types.REMOVE_ARTICLE_ID] ($state, articleId) {
    $state.articles.allIds = $state.articles.allIds.filter(
      id => id !== articleId
    )
  },
}
